<template>
  <view
    class="template-circle tn-safe-area-inset-bottom"
    style="
      padding-top: 112rpx;
      background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
    "
  >
    <!-- 顶部自定义导航 -->
    <tn-nav-bar
      fixed
      height="56"
      class="tn-color-white"
      :bottomShadow="false"
      backgroundColor="#342c68"
      >更多话题</tn-nav-bar
    >
    <!-- 头部 end-->

    <view class="group-wrap">
      <view class="title" style="margin-bottom: 46rpx">精选话题</view>
      <view
        class="tagList tn-flex tn-flex-col-center"
        v-for="(item, index) in tags"
        :key="index"
        style="margin-bottom: 40rpx"
        @click="
          navigateToFn({
            url: `/circleMixinPages/tags_list?id=${item.id}`,
            checkLogin: false,
          })
        "
      >
        <view
          style="
            width: 92rpx;
            height: 92rpx;
            border-radius: 10rpx;
            background: #fff;
            margin-right: 20rpx;
          "
        ></view>
        <view
          class="tagsItem tn-flex tn-flex-direction-column tn-flex-row-between"
          style="height: 92rpx"
        >
          <div class="text-box tn-flex tn-flex-col-center">
            <p class="name">#{{ item.title }}</p>
            <img
              v-if="index <= 0"
              style="width: 24rpx; height: 24rpx; margin-left: 18rpx"
              src="../static/other/hotIcon.png"
              alt=""
            />
          </div>
          <text style="font-size: 20rpx; color: #d8d8d8">200W热度</text>
        </view>
      </view>
    </view>
    <!-- 登录框组件 -->
    <login-fn :is-show-login="loginBoxFlag" @close="closeGlobalLoginFn">
    </login-fn>
  </view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  name: "TemplateHuati",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
  },
  props: ["tags"],
  data() {
    return {
      loginBoxFlag: false, // 登录框显示隐藏状态
      id: 25,
      body: [],
      tags: [],
      show1: false,
      cardCur: 0,
      swiperList: [],
      content: [],
      activeBgAnimation: {},
    };
  },

  onLoad(option) {
    let that = this;
    uni.$off("setLoginBoxFlag");
    uni.$on("setLoginBoxFlag", (loginBoxFlag) => {
      that.loginBoxFlag = loginBoxFlag;
    });
    if (option.id) {
      this.id = option.id;
    }
    this.fabu();
  },
  methods: {
    async fabu() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/guangChang",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          that.tags = result.data.data.tags;
          that.body = result.data.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-circle {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(0deg, #39308d 0%, #342c67 100%);
  .group-wrap {
    padding: 40rpx;
    padding-top: 20rpx !important;
    .title {
      font-size: 24rpx;
      color: #fff;
    }
    .name {
      max-width: 326rpx;
      color: #d8d8d8;
      font-weight: bold;
      font-size: 28rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
